<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript分离</title>
    <style>
        *{padding:0;margin:0;font-family:"Microsoft YaHei",sans-serif}
        li{margin-left:30px;list-style-type:circle}
        li a{font-size:20px;text-decoration:none}
        img{margin-top:15px}
    </style>
</head>
<body>
<h1>Snapshot</h1>
<ul>
    <li><a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a></li>
    <li><a href="images/coffee.jpg" title="A cup of black coffee">Coffee</a></li>
    <li><a href="images/rose.jpg" title="A red,red rose">Rose</a></li>
    <li><a href="images/bigben.jpg" title="The famous clock">Big ben</a></li>
</ul>
<img src="images/christmas.jpg" alt="圣诞快乐" title="welcome to my shop!" id="placeholder">
<script>
    var objectA=document.getElementsByTagName("a");
    //性能优化,尽量少访问DOM
    var placeholder=document.getElementById('placeholder');
    for(var i=0;i<objectA.length;i++){
        //JavaScript内添加事件处理函数:element.even=action...
        objectA[i].onclick=function(){
            var href=this.getAttribute('href');
            var title=this.getAttribute('title');


            placeholder.setAttribute('src',href);
            placeholder.setAttribute('title',title);

            return false;
        }
    }
</script>
</body>
</html>